<template>
    <div class="layout-year">
        <div class="layout-left">
            <div class="sub-title">
                <span @click="show_data_type = !show_data_type">年度数据 &nbsp;&nbsp;<i class="el-icon-caret-bottom"></i></span>
                <ul v-show="show_data_type" @mouseleave="show_data_type = !show_data_type">
                    <li>年度数据</li>
                    <li>月度数据</li>
                    <li>分地区年度数据</li>
                    <li>分地区月度数据</li>
                </ul>
            </div>
            <div class="sub-items">
              <div class="search">
                  <InputZw :style_input='style_input'> </InputZw>
                  <ButtonZw :text_zw='btn_text' class="btn-style"></ButtonZw>
              </div>
              <div>
                  <div class="accroding">
                      <div class="accroding-title" @click='show_health = !show_health'>
                          <div class="accroding-icon"></div>
                          <div class="accroding-sub-title">
                              医疗卫生机构
                          </div>
                      </div>
                      <div class="accroding-content" v-if="show_health">
                          <ul>
                              <li>
                                <el-checkbox>各类医疗卫生机构数</el-checkbox>
                              </li>
                              <li>
                                <el-checkbox>医院等级情况</el-checkbox>
                              </li>
                               <li>
                                <el-checkbox>公立医院数</el-checkbox>
                              </li>
                               <li>
                                <el-checkbox>民营医院数</el-checkbox>
                              </li>
                               <li>
                                <el-checkbox>按床位分组的医院数</el-checkbox>
                              </li>
                               <li>
                                <el-checkbox>按床位分组的基层医疗机构数</el-checkbox>
                              </li>
                               <li>
                                <el-checkbox>村卫生室数</el-checkbox>
                              </li>
                          </ul>
                      </div>
                      <div class="accroding-title" @click='show_health_person = !show_health_person'>
                          <div class="accroding-icon-2"></div>
                          <div class="accroding-sub-title">
                             卫生人员
                          </div>
                      </div>
                      <div class="accroding-content" v-if="show_health_person">
                          <ul>
                              <li>
                                <el-checkbox>各机构卫生人员数</el-checkbox>
                              </li>
                              <li>
                                <el-checkbox>各类别卫生人员数</el-checkbox>
                              </li>
                               <li>
                                <el-checkbox>每千人口卫生人员数</el-checkbox>
                              </li>
                               <li>
                                <el-checkbox>全科医生数</el-checkbox>
                              </li>
                               <li>
                                <el-checkbox>每万人口全科医生数</el-checkbox>
                              </li>
                               <li>
                                <el-checkbox>按床位分组的基层医疗机构数</el-checkbox>
                              </li>
                               <li>
                                <el-checkbox>村卫生室数</el-checkbox>
                              </li>
                          </ul>
                      </div>
                      <div class="accroding-title" @click='show_health_facilities = !show_health_facilities'>
                          <div class="accroding-icon-3"></div>
                          <div class="accroding-sub-title">
                             卫生设施
                          </div>
                      </div>
                      <div class="accroding-content" v-if="show_health_facilities">
                          <ul>
                              <li>
                                <el-checkbox>床位数</el-checkbox>
                              </li>
                               <li>
                                <el-checkbox>每千人口医疗卫生机构床位数</el-checkbox>
                              </li>
                               <li>
                                <el-checkbox>房屋建筑面积</el-checkbox>
                              </li>
                               <li>
                                <el-checkbox>租房面积</el-checkbox>
                              </li>
                          </ul>
                      </div>
                      <div class="accroding-title" @click='show_health_money = !show_health_money'>
                          <div class="accroding-icon-4"></div>
                          <div class="accroding-sub-title">
                             卫生经费
                          </div>
                      </div>
                      <div class="accroding-content" v-if="show_health_money">
                          <ul>
                              <li>
                                <el-checkbox>卫生总费用</el-checkbox>
                              </li>
                               <li>
                                <el-checkbox>卫生总费用占GPP%</el-checkbox>
                              </li>
                               <li>
                                <el-checkbox>卫生总费用构成</el-checkbox>
                              </li>
                               <li>
                                <el-checkbox>人均卫生费用</el-checkbox>
                              </li>
                          </ul>
                      </div>
                      <div class="accroding-title" @click='show_health_service = !show_health_service'>
                          <div class="accroding-icon-5"></div>
                          <div class="accroding-sub-title">
                             医疗服务
                          </div>
                      </div>
                      <div class="accroding-content" v-if="show_health_service">
                          <ul>
                              <li>
                                <el-checkbox>总诊疗人次数</el-checkbox>
                              </li>
                               <li>
                                <el-checkbox>门急诊人次数</el-checkbox>
                              </li>
                               <li>
                                <el-checkbox>卫生总费用构成</el-checkbox>
                              </li>
                               <li>
                                <el-checkbox>健康检查人次数</el-checkbox>
                              </li>
                              <li>
                                <el-checkbox>入院人数</el-checkbox>
                              </li>
                              <li>
                                <el-checkbox>出1院人数</el-checkbox>
                              </li>
                          </ul>
                      </div>
                  </div>
              </div>
            </div>
        </div>
        <div class="layout-right">
            <div class="sub-title">
                <div class="sub-title-left">
                    当前指标:&nbsp;&nbsp;{{cur_iden}}
                </div>
                <div class="sub-title-right">
                    <ButtonZw text_zw='保存' class="btn-style"></ButtonZw>
                    <i class='el-icon-refresh icon-zw'></i>
                    <i class='el-icon-download icon-zw'></i>
                </div>
            </div>
            <div class="sub-content-nav">
                <div class='sub-content-nav-icons'>
                    展现形式：
                    <i class='iconfont icon-biaoge'></i>
                    &nbsp;&nbsp;
                    <i class='iconfont icon-zhuzhuangtu'></i>
                    &nbsp;&nbsp;
                    <i class='iconfont icon-icon'></i>
                    &nbsp;&nbsp;
                    <i class='iconfont icon-bingtu'></i>
                </div>
                <div class='sub-content-nav-dimension'>
                    <div class='sub-content-nav-dimension-left' @click='show_den_dimension = !show_den_dimension'>
                        <div class='sub-content-nav-dimension-title'>
                            <i class="el-icon-menu"></i>
                            &nbsp;&nbsp;维度选择
                        </div>
                        <ul class='select-dimension' v-if='show_den_dimension'>
                            <li><el-checkbox>医疗卫生机构</el-checkbox></li>
                            <li><el-checkbox>医院</el-checkbox></li>
                            <li>&nbsp;&nbsp;&nbsp;&nbsp;<el-checkbox>综合医院</el-checkbox></li>
                            <li>&nbsp;&nbsp;&nbsp;&nbsp;<el-checkbox>中医医院</el-checkbox></li>
                            <li>&nbsp;&nbsp;&nbsp;&nbsp;<el-checkbox>中西医结合医院</el-checkbox></li>
                            <li>&nbsp;&nbsp;&nbsp;&nbsp;<el-checkbox>专科医院</el-checkbox></li>
                            <li>&nbsp;&nbsp;&nbsp;&nbsp;<el-checkbox>民族医院</el-checkbox></li>
                            <li><el-checkbox>基层医疗卫生机构</el-checkbox></li>
                            <li><el-checkbox>专业公共卫生机构</el-checkbox></li>
                            <li><el-checkbox>其他医疗卫生机构</el-checkbox></li>
                        </ul>
                    </div>
                    <div class='sub-content-nav-dimension-right'>
                        <el-date-picker
                        v-model="timer"
                        type="year"
                        style="background:#F5F5F5"
                        placeholder="选择年">
                        </el-date-picker>
                    </div>
                </div>
            </div>
            <div class="sub-content-table">
                <div style='margin-right:40px;'>
                    <div style='float:right'> 地区：全国 &nbsp;&nbsp;&nbsp;&nbsp;单位：个</div>
                </div>
                <TableZw :table_info='table_info'></TableZw>
            </div>
            <div class='sub-content-comments'>
                &nbsp;&nbsp;注：医疗卫生机构指从卫生健康行政部门取得《医疗机构执业许可证》，或从民政、工商行政、机构编制管理部门取得法人单位登记证书，为社会提供医疗保健、疾病控制、卫生监督服务或从事医学科研和医学在职培训等工作的单位。
            </div>
        </div>
    </div>
</template>

<script>

import InputZw from '@/components/InputZw.vue'
import ButtonZw from '@/components/ButtonZw.vue'
import TableZw from '@/components/TableZw.vue'

export default {
  name : 'YearData',
  components: { InputZw, ButtonZw, TableZw },
  data () {
    return {
      show_data_type : false,
      style_input : {
        width : '140px'
      },
      btn_text : '查询',
      show_health : false,
      show_health_person : false,
      show_health_facilities : false,
      show_health_money : false,
      show_health_service : false,
      cur_iden : '医疗卫生机构',
      show_den_dimension: false,
      timer:'',
      table_info : {
        row_header : [2017, 2016, 2015, 2014, 2013, 2012, 2011, 2010],
        column_header:[{
              name : '机构数',
              level : 1
          }, {
              name : '按城乡分',
              level : 1
          }, {
              name : '城市',
              level : 2
          }, {
              name : '农村',
              level : 2
          }, {
              name : '按等级注册类型分',
              level : 1
          }, {
              name : '公立',
              level : 1
          }, {
              name : '国有',
              level : 2
          }, {
              name : '集体',
              level : 2
          }, {
              name : '非公立',
              level : 1
          }, {
              name : '联营',
              level : 2
          }, {
              name : '私营',
              level : 2
          }, {
              name : '按主办单位分',
              level : 1
          }, {
              name : '政府办',
              level : 2
          }, {
              name : '卫生健康部门',
              level : 3
          }, {
              name : '社会办',
              level : 2
          }, {
              name : '个人办',
              level : 2
          }],
          table_content:[
              ['', '', '', '', '', '', '', ''],
              ['', '', '', '', '', '', '', ''],
              ['', '', '', '', '', '', '', ''],
              ['', '', '', '', '', '', '', ''],
              ['', '', '', '', '', '', '', ''],
              ['', '', '', '', '', '', '', ''],
              ['', '', '', '', '', '', '', ''],
              ['', '', '', '', '', '', '', ''],
              ['', '', '', '', '', '', '', ''],
              ['', '', '', '', '', '', '', ''],
              ['', '', '', '', '', '', '', ''],
              ['', '', '', '', '', '', '', ''],
              ['', '', '', '', '', '', '', ''],
              ['', '', '', '', '', '', '', ''],
              ['', '', '', '', '', '', '', ''],
              ['', '', '', '', '', '', '', '']
          ]
      }
    }
  },
  watch : {
    show_health () {
        if(this.show_health) {
            this.cur_iden = '医疗卫生机构'
            this.show_health_person = false
            this.show_health_facilities = false
            this.show_health_money = false
            this.show_health_service = false
        }
    },
    show_health_person () {
      if(this.show_health_person) {
        this.cur_iden = '卫生人员'
        this.show_health = false
        this.show_health_facilities = false
        this.show_health_money = false
        this.show_health_service = false
      }
    },
    show_health_money () {
      if(this.show_health_money) {
        this.cur_iden = '卫生经费'
        this.show_health = false
        this.show_health_facilities = false
        this.show_health_person = false
        this.show_health_service = false
      }
    },
    show_health_facilities () {
      if(this.show_health_facilities) {
        this.cur_iden = '卫生设施'
        this.show_health = false
        this.show_health_money = false
        this.show_health_person = false
        this.show_health_service = false
      }
    },
    show_health_service () {
      if(this.show_health_service) {
        this.cur_iden = '医疗服务'
        this.show_health = false
        this.show_health_money = false
        this.show_health_person = false
        this.show_health_facilities = false
      }
    }
  }
}
</script>

<style lang='scss'  rel="stylesheet/scss" scoped>
.sub-title{
    height: 50px;
    width:100%;
    line-height: 50px;
    .el-dropdown{
        font-size: 16px;
    }
    .el-dropdown-link {
        cursor: pointer;
        color: #333333;
    }
  .el-icon-arrow-down {
    font-size: 12px;
   }
   li{
       padding:5px;
   }
}
.layout-year{
    height: 100%;
    .layout-left,.layout-right{
        float:left;
        height: 100%;
        .sub-title{
            background: #E0E0E0;
            ul{
                position:relative;
                background: #fff;
                z-index: 999;
                li{
                    height: 30px;
                    line-height: 30px;
                    font-size: 12px;
                }
            }
        }
    }
    .layout-left{
        width:230px;
         .sub-title{
            text-align: center;
            cursor: pointer;
            ul{
                position: relative;
                background: #fff;
            }
            li{
                color:#999999;
            }
            li:hover{
                background: #017BCE;
                color:#fff;
            }
        }
        .sub-items{
            height:calc(100% - 50px);
            background: #F5F5F5;
            .search{
                padding:10px;
                .btn-style{
                    margin-left:10px;
                }
            }
        }
    }
    .layout-right{
        padding-left:20px;
        width:calc(100% - 230px);
        box-sizing: border-box;
        .sub-title-left{
            float:left;
            padding-left:10px;
        }
        .sub-title-right{
            float:right;
            padding-right:10px;
            .icon-zw{
                color: #017BCE;
                cursor: pointer;
                font-weight: bold;
                margin-left:10px;
            }
        }
        .sub-content-nav{
            padding: 15px 0;
            .sub-content-nav-icons{
                padding: 5px;
                height:30px;
                background: #F5F5F5;
                display: inline-block;
                border:1px solid #CCCCCC;
                i{
                    cursor: pointer;
                    color:#017BCE;
                }
            }
            .sub-content-nav-dimension{
                margin-right: 50px;
                float:right;
                padding: 5px;
                height:30px;
                background: #F5F5F5;
                border:1px solid #CCCCCC;
                i{
                    cursor: pointer;
                    color:#017BCE;
                }
                .sub-content-nav-dimension-left{
                    float:left;
                }
                .sub-content-nav-dimension-right{
                    float:right;
                    margin-top:-5px;
                    margin-right: -5px;
                    margin-left:10px;
                    input{
                        background:#F5F5F5;
                    }
                }
                .select-dimension{
                    margin-top: 20px;
                    max-height: 160px;
                    overflow: auto;
                    li{
                        padding:3px 0;
                        font-size: 12px;
                    }
                }
            }
        }
        .sub-content-table{
            height:calc(100% - 200px);
            overflow: auto;
            tbody{
                height:calc(100% - 235px);
                overflow: auto;
            }
        }
        .sub-content-comments{
            margin-top:20px;
            margin-right:35px;
            font-size: 12px;
            color:#999999;
        }
    }
}
.el-dropdown-menu{
    padding:0;
    text-align: center;
    background: #fff;
}
.el-dropdown-menu:hover{
    background:#017BCE;
    color:#fff;
}
input[type='checkbox']{
    width: 14px;
    height: 14px;
    border-color:#40a2de;
    background: #fff;
    color:#40a2de;
}
input[type="checkbox"]:checked{
    border-color:#40a2de;
    background: #fff;
}
.accroding .accroding-title{
    height:36px;
    background: #D7DFE2 ;
    font-size: 16px;
    color:#000;
    padding:5px;
    line-height: 36px;
    cursor: pointer;
    .accroding-icon{
        width: 30px;
        height: 32px;
        float:left;
        background:url('../../../assets/images/icons.jpg') -26px -114px no-repeat;
    }
    .accroding-icon-2{
        width: 30px;
        height: 32px;
        float:left;
        background:url('../../../assets/images/icons.jpg') -181px -114px no-repeat;
    }
    .accroding-icon-3{
        width: 30px;
        height: 32px;
        float:left;
        background:url('../../../assets/images/icons.jpg') -105px -114px no-repeat;
    }
    .accroding-icon-4{
        width: 30px;
        height: 32px;
        float:left;
        background:url('../../../assets/images/icons.jpg') -26px -180px no-repeat;
    }
    .accroding-icon-5{
        width: 30px;
        height: 32px;
        float:left;
        background:url('../../../assets/images/icons.jpg') -105px -180px no-repeat;
    }
    .accroding-sub-title{
        height:36px;
        padding-left:10px;
        line-height:36px;
        float: left;
    }
}
.accroding .accroding-title:hover{
    background: #E0E0E0;
}
.accroding .accroding-content{
//   padding-left:20px;
  li{
    padding:5px 10px 5px 20px;
    font-size: 14px;
    border-bottom: 1px solid #CCCCCC;
  }
}
</style>
<style lang='scss'  rel="stylesheet/scss">
    .sub-content-nav-dimension-right input{
        background:#f5f5f5;
    }
</style>
